<template>
	<div class="product-list">
		<h2>商品列表</h2>

		<!-- 搜索框 -->
		<div class="search-box">
			<input v-model="searchQuery" type="text" placeholder="搜索商品..." @input="filterProducts" />
		</div>

		<!-- 商品显示 -->
		<div class="product" v-for="product in filteredProducts" :key="product.id">
			<div class="product-info">
				<img :src="product.image" alt="product.name" />
				<div class="product-details">
					<h3>{{ product.name }}</h3>
					<p>{{ product.price }} 元起</p>
				</div>
			</div>
			<button class="favorite-button" :class="{'is-favorite': isFavorite(product.id)}"
				@click="toggleFavorite(product)">
				{{ isFavorite(product.id) ? '取消收藏' : '收藏' }}
			</button>
		</div>

		<!-- 分页 -->
		<div class="pagination">
			<router-link to="/pages/index/index">
			<button @click="prevPage" :disabled="page <= 1">前往购买</button>
			</router-link>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 商品数据（模拟）
	const products = ref([{
			id: 1,
			name: '惠普437N',
			price: 2300,
			image: '/static/imgs/1.png'
		},
		{
			id: 2,
			name: '弘基AS620',
			price: 1800,
			image: '/static/imgs/2.png'
		},
		{
			id: 3,
			name: '盖世小鸡',
			price: 50,
			image: '/static/imgs/3.png'
		},
		{
			id: 4,
			name: '大疆 DJI Mini 4K',
			price: 2000,
			image: '/static/imgs/4.png'
		},
		{
			id: 5,
			name: '苹果 iPadpro',
			price: 5000,
			image: '/static/imgs/5.png'
		},
		{
			id: 6,
			name: 'iPhone 12',
			price: 1300,
			image: '/static/imgs/6.png'
		},
		{
			id: 7,
			name: 'iPone 13 pro',
			price: 3000,
			image: '/static/imgs/7.png'
		},
		{
			id: 8,
			name: '荣耀X50',
			price: 1200,
			image: '/static/imgs/8.png'
		},
	])

	// 搜索查询
	const searchQuery = ref('')

	// 分页控制
	const page = ref(1)
	const itemsPerPage = 4

	// 根据搜索查询过滤商品
	const filteredProducts = computed(() => {
		const query = searchQuery.value.toLowerCase()
		return products.value.filter(product => product.name.toLowerCase().includes(query))
	})

	// 分页逻辑
	const totalPages = computed(() => {
		return Math.ceil(filteredProducts.value.length / itemsPerPage)
	})

	const paginatedProducts = computed(() => {
		const start = (page.value - 1) * itemsPerPage
		const end = start + itemsPerPage
		return filteredProducts.value.slice(start, end)
	})

	// 切换收藏状态
	const toggleFavorite = (product) => {
		let favorites = getItem('favorites') || []; // 获取收藏的商品ID
		if (favorites.includes(product.id)) {
			favorites = favorites.filter(id => id !== product.id); // 移除收藏
		} else {
			favorites.push(product.id); // 添加收藏
		}
		setFavorites(favorites); // 更新收藏
	}

	// 设置收藏的商品ID
	const setFavorites = (favorites) => {
		try {
			uni.setStorageSync('favorites', favorites); // 存储收藏的商品ID
		} catch (e) {
			console.error("设置收藏失败", e); // 错误处理
		}
	}

	// 检查商品是否被收藏
	const isFavorite = (productId) => {
		const favorites = getItem('favorites') || [];
		return favorites.includes(productId);
	}

	// 分页功能
	const prevPage = () => {
		if (page.value > 1) page.value--
	}

	const nextPage = () => {
		if (page.value < totalPages.value) page.value++
	}

	// 获取本地存储中的数据
	const getItem = (key) => {
		try {
			const value = uni.getStorageSync(key); // 使用 uni.getStorageSync 获取数据
			return value; // 返回获取到的值
		} catch (e) {
			console.error("获取数据失败", e); // 错误处理
			return []; // 如果失败，返回 null
		}
	};
</script>

this.$router.replace('/pages/index/index')

<style scoped>
	.product-list {
		display: flex;
		flex-wrap: wrap;
	}

	h2 {
		margin-top: 20px;
		margin-left:135px
	}

	.product {
		width: 400px;
		margin: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10px;
		text-align: center;
	}

	.product-info {
		display: flex; /* 使用flex布局 */
		align-items: center; /* 垂直居中 */
		justify-content: space-between; /* 水平分隔开图片和文字 */
		margin-bottom: 10px;
	}

	.product img {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.product-details {
		flex-grow: 1; /* 让文字部分占据剩余空间 */
		padding-left: 10px; /* 与图片保持一定间距 */
	}

	.favorite-button {
		width: 100%; /* 让按钮宽度占满整个容器 */
		padding: 5px 10px;
		border: none;
		background-color: #f5a623;
		color: white;
		border-radius: 5px;
		cursor: pointer;
		margin-top: 10px; /* 与文字信息保持一定间距 */
	}

	.favorite-button.is-favorite {
		background-color: #ccc;
	}

	.pagination {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pagination button {
		left: 135px;
		padding: 5px 10px;
		margin: 0 10px;
		border: none;
		background-color: #ff0000;
		color: white;
		cursor: pointer;
	}

	.pagination button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
</style>